<template>
  <div class="main-layout">
    <!-- 顶栏 -->
    <header class="main-header">
      <div class="header-left">生产管理系统</div>
      <div class="header-right">
        <span class="user-info">
          <el-icon>
            <User />
          </el-icon>
          {{ userName }} ({{ userRole }}) - {{ deptName }}
        </span>
        <el-button type="primary" @click="handleLogout">
          退出登录
        </el-button>
      </div>
    </header>
    <div class="main-body">
      <!-- 侧栏 -->
      <aside class="main-aside">
        <el-menu :default-active="activeMenu" @select="handleMenuSelect">
          <!-- 普通操作人员、部门经理可见 -->
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'" index="material">物料信息管理</el-menu-item>
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'"
            index="materialPurchase">物料采购管理</el-menu-item>
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'" index="device">设备信息管理</el-menu-item>
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'" index="repair">设备报修管理</el-menu-item>
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'" index="product">产品信息管理</el-menu-item>
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'" index="provider">供应商信息管理</el-menu-item>
          <el-menu-item v-if="userRole === '普通操作人员' || userRole === '部门经理'" index="provider_audit">供应商审核信息管理</el-menu-item>

          <!-- 部门经理、系统管理员可见 -->
          <el-menu-item v-if="userRole === '部门经理' || userRole === '系统管理员'" index="person">人员信息管理</el-menu-item>

          <!-- 所有角色可见 -->
          <el-menu-item index="productionPlan">生产计划管理</el-menu-item>
          <el-menu-item index="schedule">排班管理</el-menu-item>

          <!-- 部门管理和数据看板，根据实际需求调整可见性 -->
          <!-- 假设部门管理只有系统管理员可见 -->
          <el-menu-item v-if="userRole === '系统管理员'" index="dept">部门管理</el-menu-item>
          <!-- 假设数据看板所有角色可见 -->
          <el-menu-item index="dashboard">数据看板</el-menu-item>
        </el-menu>
      </aside>
      <!-- 核心工作区 -->
      <main class="main-content">
        <component :is="currentComponent" />
      </main>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue'
import { User } from '@element-plus/icons-vue'
import { useUserStore } from '@/stores/user'
import { useRouter } from 'vue-router'
import ProductView from './ProductView.vue'
import PersonView from './PersonView.vue'
import MaterialView from './MaterialView.vue'
import MaterialPurchaseView from './MaterialPurchaseView.vue'
import DeviceView from './DeviceView.vue'
import RepairView from './RepairView.vue'
import ProductionPlanView from './ProductionPlanView.vue'
import DeptView from './DeptView.vue'
import ScheduleView from './ScheduleView.vue'
import DashboardView from './DashboardView.vue'
import ProviderView from './ProviderView.vue'
import ProviderAuditView from './ProviderAuditView.vue'

// 从Pinia获取用户信息
const userStore = useUserStore()
const router = useRouter()

// 处理数据缺失情况
const userName = computed(() => userStore.userInfo?.name || '未命名用户')
const userRole = computed(() => userStore.userInfo?.title || '普通用户')
const deptName = computed(() => userStore.userInfo?.deptName || '未分配部门')


const componentsMap = {
  person: PersonView,
  material: MaterialView,
  materialPurchase: MaterialPurchaseView,
  device: DeviceView,
  repair: RepairView,
  product: ProductView,
  provider: ProviderView,
  provider_audit: ProviderAuditView,
  dept: DeptView,
  productionPlan: ProductionPlanView,
  schedule: ScheduleView,
  dashboard: DashboardView
}

const activeMenu = ref('person')
const handleMenuSelect = (key: string) => {
  console.log(key)
  activeMenu.value = key
}
const currentComponent = computed(() => {
  let key = activeMenu.value as keyof typeof componentsMap
  return componentsMap[key]
})

// 退出登录处理
const handleLogout = () => {
  userStore.clearUserInfo()
  router.push('/')
}
</script>

<style scoped>
.main-layout {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: linear-gradient(135deg, #f0f4fa 0%, #e9efff 100%);
}

.main-header {
  width: 100%;
  min-width: 0;
  background: #409EFF;
  color: #fff;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 20px;
  box-shadow: 0 2px 8px rgba(64, 158, 255, 0.08);
  z-index: 10;
}

.header-left {
  font-size: 26px;
  font-weight: bold;
  letter-spacing: 3px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  background: rgba(255, 255, 255, 0.1);
  padding: 6px 12px;
  border-radius: 6px;
  transition: background 0.2s;
  margin-right: 10px;
  white-space: nowrap;
}

.user-info:hover {
  background: rgba(255, 255, 255, 0.2);
}

.main-body {
  flex: 1;
  display: flex;
  min-height: 0;
}

.main-aside {
  width: 180px;
  background: #fff;
  border-right: 1.5px solid #e0e6ed;
  box-shadow: 2px 0 8px rgba(64, 158, 255, 0.04);
  display: flex;
  flex-direction: column;
  padding-top: 24px;
  min-height: 0;
}

.el-menu {
  border-right: none;
  background: transparent;
}

.el-menu-item {
  border-radius: 8px;
  margin: 8px 12px;
  font-size: 14px;
  transition: background 0.2s;
}

.el-menu-item.is-active,
.el-menu-item:hover {
  background: #e3f0ff !important;
  color: #409EFF !important;
}

.main-content {
  flex: 1 1 auto;
  background: #f9fbfd;
  padding: 0;
  min-height: 0;
  border-radius: 0;
  margin: 0;
  box-shadow: 0 2px 16px rgba(64, 158, 255, 0.07);
  overflow: auto;
}

@media (max-width: 900px) {
  .main-aside {
    width: 50px;
    padding-top: 8px;
  }

  .main-content {
    margin: 0;
    padding: 0;
  }

  .main-header {
    font-size: 18px;
    height: 48px;
    line-height: 48px;
  }
}
</style>